import {
	Component,
	OnInit,
	HostBinding,
	trigger,
	transition,
	state,
	style,
	animate
} from '@angular/core';

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { Bearing } from '../scheme/bearing';

@Component({
	moduleId: module.id,
	selector: 'my-bearing-add',
	templateUrl: 'bearing-add.component.html',
	styleUrls: ['bearing.css'],
	animations: [
		trigger('routeAnimation', [
			state('*',
				style({
					opacity: 1,
					transform: 'translateX(0)'
				})
			),
			transition('void => *', [
				style({
					opacity: 0,
					transform: 'translateX(-15%)'
				}),
				animate('0.35s ease-in-out')
			])
		])
	]
})
export class BearingAddComponent implements OnInit {
	/**
	 * 路由转场动画
	 */
	@HostBinding('@routeAnimation') get routeAnimation() {
		return true;
	}

	@HostBinding('style.display') get display() {
		return 'block';
	}

	bear: Bearing = {
		id: '',
		types: '',
		brand: '',
		new_style: '',
		old_style: '',
		inside_diameter: NaN,
		outside_diameter: NaN,
		thickness: NaN,
		purchase_price: NaN,
		unit_price: NaN,
		stock: NaN,
		arrival_data: ''
	};

	active = true;
	submitted = false;

	onSubmit() { this.submitted = true };

	addBearing() {
		console.log(this.bear);
		this.active = false;
		setTimeout(() => this.active = true, 0);
	};

	get diagnostic() { return JSON.stringify(this.bear) };

	bearingForm: FormGroup;
	constructor(private fb: FormBuilder) { }

	ngOnInit(): void {
		this.buildForm();
	}

	buildForm(): void {
		this.bearingForm = this.fb.group({
			'types': [
				this.bear.types, [
					Validators.required,
					Validators.minLength(4)
				]
			],
			'brand': [
				this.bear.brand, [Validators.required]
			],
			'new_style': [
				this.bear.new_style, [Validators.required]
			],
			'old_style': [
				this.bear.old_style, [Validators.required]
			],
			'inside_diameter': [
				this.bear.inside_diameter, [Validators.required]
			],
			'outside_diameter': [
				this.bear.outside_diameter, [Validators.required]
			],
			'thickness': [
				this.bear.thickness, [Validators.required]
			],
			'purchase': [
				this.bear.purchase_price, [Validators.required]
			],
			'unit': [
				this.bear.unit_price, [Validators.required]
			],
			'stock': [this.bear.stock]
		});

		this.bearingForm.valueChanges.subscribe(data => this.onValueChanged(data));
		this.onValueChanged();
	}

	onValueChanged(data?: any) {
		if (!this.bearingForm) { return; }
		const form = this.bearingForm;
		for (const field in this.formErrors) {
			this.formErrors[field] = '';
			const control = form.get(field);
			if (control && control.dirty && !control.valid) {
				const messages = this.validationMessages[field];
				for (const key in control.errors) {
					this.formErrors[field] += messages[key] + ' ';
				}
			}
		}
	}

	validationMessages = {
		'types': {
			'required': '此为必填项，不能为空',
			'minlength': '名称不能少于4个字符'
		},
		'brand': {
			'required': '此为必填项，不能为空',
		},
		'new_style': {
			'required': '国内新型号，必填，方便搜索'
		},
		'old_style': {
			'required': '国内旧型号，必填，方便搜索'
		},
		'inside_diameter': {
			'required': '内径，填写具体数值即可，方便搜索，不能为空'
		},
		'outside_diameter': {
			'required': '外径，填写具体数值即可，方便搜索，不能为空'
		},
		'thickness': {
			'required': '厚度，填写具体数值即可，方便搜索，不能为空'
		},
		'purchase': {
			'required': '此为必填项，不能为空且只能输入数字'
		},
		'unit': {
			'required': '此为必填项，不能为空只能输入数字'
		},
		'stock': {
			'required': '此为必填项，不能为空只能输入数字'
		}
	};

	formErrors = {
		'types': '',
		'brand': '',
		'new_style': '',
		'old_style': '',
		'inside_diameter': '',
		'outside_diameter': '',
		'thickness': '',
		'purchase': '',
		'unit': '',
		'stock': ''
	};
}